import { useAppDispatch } from '@/store/hooks';
import { memo, useEffect } from 'react';
import type { ReactNode, FC } from 'react';

import {
  fetchBanners,
  fetchHotRecommends,
  fetchNewAlbums,
  fetchRangking,
  fetchResidentSingers,
  fetchTopAnchors,
} from './store/recommended';
import TopBanners from './c-cpns/top-banners';
import { SectionLeft, SectionRight, SectionWrapper } from './style';
import HotRecommends from './c-cpns/hot-recommends';
import PersonalizeRd from './c-cpns/personalize-rd';
import NewAlbum from './c-cpns/new-album';
import TopRangking from './c-cpns/top-rangking';
import dis_vip from '@/assets/img/dis_vip_card.png';
import ResidentSingers from './c-cpns/resident-singers';
import TopAnchors from './c-cpns/top-anchors';

interface IProps {
  children?: ReactNode;
}

const Recommended: FC<IProps> = (props) => {
  const dispath = useAppDispatch();
  useEffect(() => {
    dispath(fetchBanners());
    dispath(fetchHotRecommends());
    dispath(fetchNewAlbums());
    dispath(fetchRangking());
    dispath(fetchResidentSingers());
    dispath(fetchTopAnchors());
  }, []);
  return (
    <>
      <TopBanners />
      <SectionWrapper className="w980">
        <SectionLeft>
          <HotRecommends />
          <PersonalizeRd />
          <NewAlbum />
          <TopRangking />
        </SectionLeft>
        <SectionRight>
          <div className="vip">
            <img src={dis_vip} />
          </div>
          <div className="login sprite_02">
            <p>登录网易云音乐，可以享受无限收藏的乐趣，并且无限同步到手机</p>
            <a className="sprite_02">用户登录</a>
          </div>
          <ResidentSingers></ResidentSingers>
          <TopAnchors></TopAnchors>
        </SectionRight>
      </SectionWrapper>
    </>
  );
};

export default memo(Recommended);
